{extend name="public/base"}

{block name="title"}
订单详情
{/block}

{block name="style"}
{css href="/static/wechat/css/index.css" /}
{css href="/static/wechat/popo/css/index_info_map.css" /}

<style type="text/css">
    .nav {background: #fff;}
    .nav .msui_navTop-title { color: #333}
    .index_need #map{height:36%;z-index:999;}
    .weui-popup__overlay{opacity:1;}
    .weui-dialog__btn{color:#0bb20c;font-size:0.8rem;}
    .weui-dialog, .weui-toast{box-shadow:0 0 3px 0 #000;}
    .btmtip {
        position: absolute;
        top: 38%;
        right: 5px;
        z-index: 999;
        font-size: 12px;
        border-radius: 5px;
        background-color: #0D9BF2;
        padding: 5px 8px;
        width: auto;
        color: white;
    }
    .order_marker{display:block;width:40px;height:40px;overflow:hidden;margin:10px 0 0 -12px;}
    .order_marker img{display:block;margin:4px auto;width:32px;height:32px;border-radius:50%;box-shadow:0 0 4px 0 #666;}
    .index_need_btn {
        display: flex;
        background: #fff;
        border: 1px solid #ddd;
    }
    .index_need_btn a {
        background: #FF1515;
    }
    .index_need_btn a:nth-child(2) {
        margin-left: 1px;
    }
</style>
{/block}

{block name="body"}

<div class="pageControl index_need">
    <div class="nav">
        <div class="msui_navTop">
            <a class="msui_navTop-back" href="javascript:history.back();"><i class="micon-back_ff6"></i></a>
            <h1 class="msui_navTop-title">订单详情</h1>
        </div>
    </div>
    <div id="map" class="weui-cell__bd"></div>
    <div id='map_bt' class="btmtip" style="display:block;position:absolute;top:38%;right:5px;z-index:999;font-size:12px;border-radius:5px;background-color:#0D9BF2;padding:5px 8px;width:auto;color:white;">导航</div>
    <div class="index_need_detail">
        <div class="msui_table msui_tableCom">
            {switch  name="order.status"}
                {case value="1"}
                    <div class="msui_tabCell-content">
                        <p class="fs085 cl-3333 action">等待接单中。。。</p>
                    </div>
                {/case}
                {case value="9"}
                    <div class="msui_tabCell-content">
                        <p class="fs085 cl-3333">已取消</p>
                    </div>
                {/case}
                {default /}
                    <a class="msui_tabCell-img msui_tableImg-circle" href="javascript:;">
                        <img class="img-response" src="{$order.r_headimgurl|get_img_url}" />
                    </a>
                    <div class="msui_tabCell-content">
                        <p class="fs085 cl-3333">{$order.repair_name}</p>
                        <!--<p class="fs07 cl-6666">{$order.car_name}</p>-->
                    </div>
            {/switch}
            <!--<div class="msui_tabCell-button">-->
                <!--<a href="javascript:;" class="need_link need_message"><img class="img-response" src="/static/wechat/images/message1.jpg" alt=""/></a>-->
            <!--</div>-->
            <div class="msui_tabCell-button">
                <a href="tel:{$order.r_phone|default=''}" class="need_link need_phone"><img class="img-response" src="/static/wechat/images/message2.jpg" alt=""/></a>
            </div>
        </div>
        <div class="msui_table msui_tableCom">
            <div class="msui_tabCell-content">
                <p class="fs085 cl-3333"><b>[{$order.item_name}]</b> {$order.msg}</p>
            </div>
        </div>
        <div class="msui_table index_need_tableCom">
            <div class="msui_tabCell-content">
                <p class="fs07 cl-9999">{$order.address}</p>
            </div>
            <div class="msui_tabCell-button">
                <p class="fs07 cl-9999">距你约 <span id="box_juli">0</span>m</p>
            </div>
        </div>
        <div class="msui_table index_need_tableCom">
            <div class="msui_tabCell-content need_serve">
                <p class="fs07 cl-9999">服务方式 : <span>{if condition="$order.service_mode==1"}到店服务{else/}上门服务{/if}</span></p>
                <p class="fs07 cl-9999">服务时间 : <span id="box_service_time"></span>（发布时间: <span id="box_add_time"></span>）</p>
            </div>
        </div>

        <p class="fs075 cl-3333 text-center">
            <span class="fs12 cl-ffa action">{$order.status|get_order_server_status}</span>
        </p>
        <p class="fs075 cl-3333 text-center">
            <span class="fs12 cl-ffa">{$order.order_price}</span>元 <a href="{:url('server_order_goods', ['order_id' => $order['id']])}">(查看产品列表)</a>
        </p>
        <a href="javascript:;" class="fs07 cl-9999 text-center need_jump">查看明细图片</a>
        <div id="box_need_jump"></div>
    </div>
    {switch  name="order.status"}
        {case value="1"}
            <!--等待接单-->
            <div class="index_need_btn">
                <a href="javascript:;" style="color: #FF1515; background-color: #fff;">等待接单</a>
                <a href="javascript:;" class="cancel_order" data-order-id="{$order.id}" data-model="order_server">取消订单</a>
            </div>
        {/case}
        {case value="11"}
            <!--议价中-->
            <div class="index_need_btn">
                <a href="javascript:;" class="order_push_again" data-order-id="{$order.id}" data-model="order_server">取消订单</a>
            </div>
        {/case}
        {case value="2"}
            <!--代付款-->

            <div class="index_need_btn"><a href="/wechat/pay/order_pay/?id={$order.id}&model=order_server">去付款</a></div>
        {/case}
        {case value="3"}
            <!--已付款-服务中-待确认-->
            {eq name='order.after_sale_status' value="0"}
            <div class="index_need_btn">
                <a href="javascript:;" class="affirm_finish" data-order-id="{$order.id}" data-model="order_server">确认完成</a>
                <a href="{:url('server_order_goods', ['order_id' => $order['id']])}">申请退款</a>
            </div>
            {else /}
            <div class="index_need_btn">
                <a href="javascript:;" >退款中</a>
            </div>
            {/eq}
        {/case}
        {case value="4"}
            <!--已付款-服务中-待确认-->
            {eq name='order.after_sale_status' value="0"}
            <div class="index_need_btn">
                <a href="javascript:;" class="affirm_finish" data-order-id="{$order.id}" data-model="order_server">确认完成</a>
                <a href="{:url('server_order_goods', ['order_id' => $order['id']])}">申请退款</a>
            </div>
            {else /}
            <div class="index_need_btn">
                <a href="javascript:;" >退款中</a>
            </div>
            {/eq}
        {/case}
        {case value="6"}
            <div class="index_need_btn">
            <!--已确认-->
            {eq name="order.after_sale_status" value="0"}
                {eq name='order.is_comment' value="1"}
                    <a href="javascript:;" style="color: #FF1515; background-color: #fff;">已评价</a>
                {else /}
                    <a href="{:url('w_comment/index', ['order_id' => $order['id'], 'type' => '2'])}" style="color: #fff; background-color: #FF1515;">待评价</a>
                    <a href="{:url('server_order_goods', ['order_id' => $order['id']])}">申请售后</a>
                {/eq}
            {else /}
                <a href="javascript:;">售后中</a>
            {/eq}
            </div>
        {/case}
        {case value="7"}
            <!--服务中-待确认-->
            <div class="index_need_btn"><a href="javascript:;">交易完成</a></div>
        {/case}
        {case value="9"}
        <!--已取消-->
            <div class="index_need_btn"><a href="javascript:;">已取消</a></div>
        {/case}
    {/switch}
</div>

<!-- loading toast -->
<div id="loadingToast" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast" style="opacity: 1; visibility: visible;">
        <i class="weui-loading weui-icon_toast"></i>
        <p class="weui-toast__content">加载中...</p>
    </div>
</div>
<div id="iosDialog2" class="js_dialog" style="display:none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:;" onclick="$('#iosDialog2').hide();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>

{/block}


{block name="javascript"}
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
    wx.config({
        //debug: true,
        appId: '{$signPackage.appId}',
        timestamp: parseInt('{$signPackage.timestamp}'),
        nonceStr: '{$signPackage.nonceStr}',
        signature: '{$signPackage.signature}',
        jsApiList: [
            // 所有要调用的 API 都要加到这个列表中
            'previewImage'
        ]
    });
</script>
<script src="http://webapi.amap.com/maps?v=1.3&key=9a8d0d7e358d9d80f7f61a1989ba35a0&plugin=AMap.Driving"></script>
<script>
    //改写原生的对话框
    function sAlert(s){
        $('#iosDialog2').show();
        $('#iosDialog2 .weui-dialog__bd').html(s);
    }
    window.alert = function(s){sAlert(s);}
    {in name="order.status" value="1, 9"}
        var my_lat = parseFloat('{$order.lat}');
        var my_lng = parseFloat('{$order.lon}');
    {else /}
        var my_lat = parseFloat('{$order.r_lat}');
        var my_lng = parseFloat('{$order.r_lon}');
    {/in}
    var order_lat = parseFloat('{$order.lat}');
    var order_lng = parseFloat('{$order.lon}');
    var need_jump_arr = '{$order.img1}|{$order.img2}|{$order.img3}|{$order.img4}|{$order.img5}'.split('|');

    $(function(){
        $('.need_jump').click(function(){
            var tmpNum = 0;
            var tmpArr = new Array();
            for(i=0;i<need_jump_arr.length;i++){
                if(need_jump_arr[i]!=''){
                    tmpArr[tmpNum] = 'http://'+SCOPE.image_host_url+need_jump_arr[i];
                    tmpNum++;
                }
            }
            if(tmpArr.length){
                try{
                    wx.previewImage({current:tmpArr[0],urls:tmpArr});
                }catch(e){alert('需要在微信中查看');}
            }else{
                alert('用户没有上传图片');
            }
        });

        var map = new AMap.Map('map', {
            resizeEnable: true,
            center: [my_lng,my_lat],//地图中心点
            zoom: 15 //地图显示的缩放级别
        });

        {in name="order.status" value="1, 9"}
            var touxiang = new AMap.Marker({
                position: [order_lng,order_lat]
            });
            touxiang .setMap(map);
            var tmpHtml = '<a class="order_marker" id="order_id_{$order.id}" href="javascript:;"><img src="{$order.m_headimgurl|get_img_url}" /></a>';
            touxiang .setContent(tmpHtml);
        {else /}
            //构造路线导航类
            var driving = new AMap.Driving({
                policy:AMap.DrivingPolicy.LEAST_TIME,
                map: map,

                //,panel: "panel"
            });
            // 根据起终点经纬度规划驾车导航路线
            driving.search([order_lng,order_lat],[my_lng,my_lat],function(status,result){
                $('#map_bt').click(function(){
                    driving.searchOnAMAP({
                        origin:result.origin,
                        destination:result.destination
                    });
                });
            });
        {/in}



        {in name="order.status" value="1, 9"}
            $("#box_juli").parent().parent().hide();
        {else /}
            var num_juli = getFlatternDistance(my_lat,my_lng,order_lat,order_lng).toFixed(0);
            $("#box_juli").html(num_juli);
        {/in}

        var str_service_time = parseInt('{$order.service_time}');
        if(str_service_time){
            str_service_time = php_date("m-d H:i",str_service_time);
        }else{
            str_service_time = "立即";
        }
        $("#box_service_time").html(str_service_time);

        var str_add_time = php_date("m-d H:i",parseInt('{$order.add_time}'))
        $("#box_add_time").html(str_add_time);
    });

    var EARTH_RADIUS = 6378137.0;    //单位M
    var PI = Math.PI;

    function getRad(d){
        return d*PI/180.0;
    }

    function getFlatternDistance(lat1,lng1,lat2,lng2){
        var f = getRad((lat1 + lat2)/2);
        var g = getRad((lat1 - lat2)/2);
        var l = getRad((lng1 - lng2)/2);

        var sg = Math.sin(g);
        var sl = Math.sin(l);
        var sf = Math.sin(f);

        var s,c,w,r,d,h1,h2;
        var a = EARTH_RADIUS;
        var fl = 1/298.257;

        sg = sg*sg;
        sl = sl*sl;
        sf = sf*sf;

        s = sg*(1-sl) + (1-sf)*sl;
        c = (1-sg)*(1-sl) + sf*sl;

        w = Math.atan(Math.sqrt(s/c));
        r = Math.sqrt(s*c)/w;
        d = 2*w*a;
        h1 = (3*r -1)/2/c;
        h2 = (3*r +1)/2/s;

        var tmpReturn = d*(1 + fl*(h1*sf*(1-sg) - h2*(1-sf)*sg));
        return (tmpReturn?tmpReturn:0);
    }


    // 和PHP一样的时间戳格式化函数
    // @param  {string} format    格式
    // @param  {int}    timestamp 要格式化的时间 默认为当前时间
    // @return {string}           格式化的时间字符串
    function php_date ( format, timestamp ) {
        var a, jsdate=((timestamp) ? new Date(timestamp*1000) : new Date());
        var pad = function(n, c){
            if( (n = n + "").length < c ) {
                return new Array(++c - n.length).join("0") + n;
            } else {
                return n;
            }
        };
        var txt_weekdays = ["Sunday","Monday","Tuesday","Wednesday", "Thursday","Friday","Saturday"];
        var txt_ordin = {1:"st",2:"nd",3:"rd",21:"st",22:"nd",23:"rd",31:"st"};
        var txt_months = ["", "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
        var f = {
            // Day
            d: function(){
                return pad(f.j(), 2);
            },
            D: function(){
                t = f.l(); return t.substr(0,3);
            },
            j: function(){
                return jsdate.getDate();
            },
            l: function(){
                return txt_weekdays[f.w()];
            },
            N: function(){
                return f.w() + 1;
            },
            S: function(){
                return txt_ordin[f.j()] ? txt_ordin[f.j()] : 'th';
            },
            w: function(){
                return jsdate.getDay();
            },
            z: function(){
                return (jsdate - new Date(jsdate.getFullYear() + "/1/1")) / 864e5 >> 0;
            },
            // Week
            W: function(){
                var a = f.z(), b = 364 + f.L() - a;
                var nd2, nd = (new Date(jsdate.getFullYear() + "/1/1").getDay() || 7) - 1;
                if(b <= 2 && ((jsdate.getDay() || 7) - 1) <= 2 - b){
                    return 1;
                } else{
                    if(a <= 2 && nd >= 4 && a >= (6 - nd)){
                        nd2 = new Date(jsdate.getFullYear() - 1 + "/12/31");
                        return date("W", Math.round(nd2.getTime()/1000));
                    } else{
                        return (1 + (nd <= 3 ? ((a + nd) / 7) : (a - (7 - nd)) / 7) >> 0);
                    }
                }
            },
            // Month
            F: function(){
                return txt_months[f.n()];
            },
            m: function(){
                return pad(f.n(), 2);
            },
            M: function(){
                t = f.F(); return t.substr(0,3);
            },
            n: function(){
                return jsdate.getMonth() + 1;
            },
            t: function(){
                var n;
                if( (n = jsdate.getMonth() + 1) == 2 ){
                    return 28 + f.L();
                } else{
                    if( n & 1 && n < 8 || !(n & 1) && n > 7 ){
                        return 31;
                    } else{
                        return 30;
                    }
                }
            },
            // Year
            L: function(){
                var y = f.Y();
                return (!(y & 3) && (y % 1e2 || !(y % 4e2))) ? 1 : 0;
            },
            //o not supported yet
            Y: function(){
                return jsdate.getFullYear();
            },
            y: function(){
                return (jsdate.getFullYear() + "").slice(2);
            },
            // Time
            a: function(){
                return jsdate.getHours() > 11 ? "pm" : "am";
            },
            A: function(){
                return f.a().toUpperCase();
            },
            B: function(){
                // peter paul koch:
                var off = (jsdate.getTimezoneOffset() + 60)*60;
                var theSeconds = (jsdate.getHours() * 3600) +
                        (jsdate.getMinutes() * 60) +
                        jsdate.getSeconds() + off;
                var beat = Math.floor(theSeconds/86.4);
                if (beat > 1000) beat -= 1000;
                if (beat < 0) beat += 1000;
                if ((String(beat)).length == 1) beat = "00"+beat;
                if ((String(beat)).length == 2) beat = "0"+beat;
                return beat;
            },
            g: function(){
                return jsdate.getHours() % 12 || 12;
            },
            G: function(){
                return jsdate.getHours();
            },
            h: function(){
                return pad(f.g(), 2);
            },
            H: function(){
                return pad(jsdate.getHours(), 2);
            },
            i: function(){
                return pad(jsdate.getMinutes(), 2);
            },
            s: function(){
                return pad(jsdate.getSeconds(), 2);
            },
            //u not supported yet
            // Timezone
            //e not supported yet
            //I not supported yet
            O: function(){
                var t = pad(Math.abs(jsdate.getTimezoneOffset()/60*100), 4);
                if (jsdate.getTimezoneOffset() > 0) t = "-" + t; else t = "+" + t;
                return t;
            },
            P: function(){
                var O = f.O();
                return (O.substr(0, 3) + ":" + O.substr(3, 2));
            },
            //T not supported yet
            //Z not supported yet
            // Full Date/Time
            c: function(){
                return f.Y() + "-" + f.m() + "-" + f.d() + "T" + f.h() + ":" + f.i() + ":" + f.s() + f.P();
            },
            //r not supported yet
            U: function(){
                return Math.round(jsdate.getTime()/1000);
            }
        };
        return format.replace(/[\\]?([a-zA-Z])/g, function(t, s){
            if( t!=s ){
                // escaped
                ret = s;
            } else if( f[s] ){
                // a date function exists
                ret = f[s]();
            } else{
                // nothing special
                ret = s;
            }
            return ret;
        });
    }

</script>
{/block}